<template>
    <div class="content">
    
        <div class="login_container">
            <el-form class="demo-dynamic" :model="loginModel" ref="form" :rules="rules">
                <el-col >
                        <h1 id="login_btn1">
                         捡宝地
                        </h1>
                        
                </el-col>
                <el-form-item >
                    <el-col :span="24">
                        <el-input placeholder="请输入账户" v-model="loginModel.username" clearable />
                    </el-col>
                </el-form-item>
                <el-form-item >
                    <el-col :span="24">
                    
                        <el-input type="password" placeholder="请输入密码" v-model="loginModel.password" show-password />
                    </el-col>
                </el-form-item>

                <el-col :span="24">
                    <div id="login_btn">
                            <a href="#" @click="commit">Go</a>
                    </div>
                </el-col>
            </el-form>

        </div>
    </div>

</template>
<script setup lang="ts">
import {FormInstance} from "element-plus";
import {reactive, ref} from "vue";
import {lgoinApi} from '@/api/user/index'
import {userStore} from '@/store/user/index'
import {useRouter} from "vue-router";

const router = useRouter()
const store = userStore()
//表单的ref属性
const form = ref<FormInstance>();
//表单绑定的对象
const loginModel = reactive({
    username: "",
    password: "",
});
//表单验证规则
const rules = reactive({
    username: [{ required: true, message: '请填写账户', trigger: 'change' }],
    password: [{ required: true, message: '请填写密码', trigger: 'change' }],
});
//登录提交
const commit = () => {
    form.value?.validate(async (valid) => {
        if (valid) {
            let res = await lgoinApi(loginModel)
            console.log(res)
            store.setUserId(res.data.userId)
            store.setToken(res.data.token)
            router.push({ path: '/home' })
        }
    })

}
</script>

<style lang="scss">
.content {
    width: 100%;
    height: 100%;
    background-image: url('../../assets/login3.png');
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.login_container {
    width: 500px;
    height: 450px;
    background: rgba(223, 219, 219, 0.2);
    border-radius: 5px;
    box-shadow: 0 25px 35px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.el-input__wrapper {
    margin-bottom: 10px;
}

#login_btn {
     text-align: center;
     display: block;
     height: 20px;
     padding: 8px;
     font: 900 20px '';
     border-radius: 10px;
     margin-top: 15px;   
     color: #fff;
     letter-spacing: 3px;
     background-image: linear-gradient(to left,#fd79a8,#a29bf6);
}
#login_btn1 {
     text-align: center;
     display: block;
     height: 20px;
     padding: 8px;
     color: black;
   /*   font: 900 20px ''; */
   /*   border-radius: 10px; */
   /*   margin-top: 15px;    */
   /*   color: #fff; */
   /*   letter-spacing: 3px; */
   /*   background-image: linear-gradient(to left,#9e79fd,#9bf6d0); */
}
.el-button el-button--primary {
    height: 55px !important;
}

.demo-dynamic {
    width: 80%;
    height: 80%;

}
.button{
   width: 280px;
   height: 40px;
   margin: 35px auto 40px auto;
   border:  none;
   background-color: linear-gradient(-200deg,#fac0e7,#aac2ee);
   color: #fff;
   font-weight: bold;
   letter-spacing: 8px;
   border-radius: 10px;
   cursor: pointer;
}
.center {  
    width: 40px;
    height: 40px;
    align: center;  
}
</style>